<template>
	<view class="login flex">
		<view class="login-main">
			<view class="login-tel flex">
				<text class="phone-number">验证码</text>
				<input type="text" placeholder="请输入验证码" v-model="code"/>
				<view class="countdown flex" v-if="countDownTime>-1">{{countDownTime}}</view>
				<button type="default" class="resend flex" v-else @tap="sendCode">重新发送</button>
			</view>
			<Lines/>
			<view class="checkebBox">
				我们已经给您为{{userTel}}的手机号码发送了验证短信
			</view>
			<view 
			class="login-next flex" 
			:class="sdkCode?'bg-color':'bg-color-noactive'"
			@tap="goSetPwd"
			>下一步</view>
		</view>
	</view>
</template>

<script>
	import $http from '../../common/api/request.js'
	import Lines from '../../components/common/Lines.vue'
	export default {
		data() {
			return {
				userTel:'',
				code:'',
				sdkCode:'',
				countDownTime:15
			}
		},
		components:{
			Lines
		},
		onReady() {
			this.sendCode()
		},
		onLoad(e) {
			this.userTel = e.phone;
		},
		methods: {
			// 发起请求，获取短信
			sendCode(){
				$http.request({
					url:"/code",
					method:"POST",
					data:{
						phone:this.userTel
					}
				}).then((res)=>{
					console.log(res);
					// this.sdkCode = res.code;
					this.code = this.sdkCode = 123
				}).catch(()=>{
					uni.showToast({
						title:'请求失败',
						icon:'none'
					})
				})
				var countDown = setInterval(()=>{
					this.countDownTime--
					if(this.countDownTime<0){
						clearInterval(countDown)
					}
				},1000)
			},
			// 去到设置密码
			goSetPwd(){
				// 跳转页面到设置密码姓名 昵称页面
				if(this.code == this.sdkCode){
					uni.navigateTo({
						url:"/pages/login-set-pwd/login-set-pwd?phone="+this.userTel+"&&code="+this.code+""
					})
				}
			}
		}
	}
</script>

<style scoped>
.flex {
	display: flex;
	justify-content: center;
	align-items: center;
}
.login-main{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.login-tel{
	width: 750rpx;
	height: 80rpx;
}
.phone-number{
	padding-left: 50rpx;
	width: 200rpx;
	color: #000000;
}
input {
	flex: 1;
	color: #000000;
}
.login-next{
	width: 650rpx;
	height: 70rpx;
	border-radius: 50rpx;
	margin-top: 20rpx;
	color: white;
}
.checkebBox{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-top: 20rpx;
	font-size: 22rpx;
}
.countdown{
	margin-right: 20rpx;
	width: 50rpx;
	height: 50rpx;
	border: 2rpx solid #e1e1e1;
	border-radius: 100%;
}
.resend {
	width: 120rpx;
	font-size: 20rpx;
	margin-right: 20rpx;
}
</style>
